<template>
    <view class="bg-[#F6F7F9] min-h-screen">
        <up-navbar title="退款失败" :safeAreaInsetTop="true" bgColor="#FFF" :placeholder="true">
			<template #left>
				<view class="flex px-[24rpx] py-[16rpx] border-[1rpx] border-slate-200 rounded-[38rpx]">
					<up-icon name="arrow-left" size="19" @click="goback"></up-icon>
					<up-line direction="column" :hairline="false" length="16" margin="0 8px"></up-line>
					<up-icon name="home" size="20" @click="gohome"></up-icon>
				</view>
			</template>
		</up-navbar>
        <view class="mx-[30rpx] my-[24rpx] py-[32rpx] px-[30rpx] bg-[#fff] rounded-[16rpx]">
			<view class="flex justify-between items-center mb-[32rpx]">
				<view class="text-[26rpx] text-[#333] font-normal">订单编号：2024122701234</view>
				<view class="text-[22rpx] text-[#333] font-normal">退款成功</view>
			</view>
			<up-line></up-line>
			<view class="mt-[30rpx] flex">
				<view class="mr-[24rpx]">
					<up-image src="https://cdn.uviewui.com/uview/album/1.jpg" width="136rpx" height="136rpx" radius="4"></up-image>
				</view>
				<view class="flex justify-between flex-1">
					<view class="flex flex-col justify-between flex-1">
						<view>
							<view class="text-[30rpx] text-[#101010] font-normal mb-[4rpx]">自家农场的新鲜蔬菜</view>
							<view class="text-[24rpx] text-[#666] font-normal">规格：300g/份</view>
						</view>
						<view class="flex">
							<view class="text-[18rpx] text-[#ff4d18] font-noraml py-[2rpx] px-[10rpx] rounded-[4rpx] border-[1rpx] border-[#ccc] mr-[8rpx]">处理方便</view>
							<view class="text-[18rpx] text-[#ff4d18] font-noraml py-[2rpx] px-[10rpx] rounded-[4rpx] border-[1rpx] border-[#ccc] mr-[8rpx]">大小均匀</view>
							<view class="text-[18rpx] text-[#ff4d18] font-noraml py-[2rpx] px-[10rpx] rounded-[4rpx] border-[1rpx] border-[#ccc]">老少皆宜</view>
						</view>
					</view>
					<view class="flex flex-col items-end justify-center">
						<priceNumber price="7.33"></priceNumber>
						<view class="text-[28rpx] text-[#333] font-normal">×1</view>
					</view>
				</view>
			</view>
        </view>
		<view class="p-[30rpx] mx-[30rpx] my-[24rpx] bg-[#fff] rounded-[16rpx]">
			<view class="text-[30rpx] text-[#333] font-normal mb-[24rpx]">售后信息</view>
			<view class="flex flex-wrap mb-[24rpx]">
				<view class="px-[20rpx] py-[12rpx] bg-[#FFE9E3] text-[#FF4D1B] rounded-[40rpx] border-[1rpx] border-[#FF4D1B] text-[24rpx] font-normal mr-[24rpx]">选择原因</view>
				<view class="px-[20rpx] py-[12rpx] bg-[#FFE9E3] text-[#FF4D1B] rounded-[40rpx] border-[1rpx] border-[#FF4D1B] text-[24rpx] font-normal">可多选原因</view>
			</view>
			<view class="p-[24rpx] bg-[#F7F8FA] rounded-[8rpx] text-[24rpx] text-[#333] font-normal min-h-[224rpx]">用户描述的问题内容</view>
			<view class="flex flex-wrap mt-[24rpx]">
				<up-image v-for="(item,index) in 5" :key="index" src="https://cdn.uviewui.com/uview/album/1.jpg" width="128rpx" height="128rpx" radius="4" class="mr-[24rpx] mb-[24rpx]"></up-image>
			</view>
		</view>
		<view class="p-[30rpx] mx-[30rpx] my-[24rpx] bg-[#fff] rounded-[16rpx]">
			<view class="text-[30rpx] text-[#333] font-normal mb-[24rpx]">退款失败回执</view>
			<view class="min-h-[224rpx] bg-[#F7F8FA] rounded-[8rpx] p-[24rpx] text-[24rpx] text-[#333] font-normal">如有疑问请咨询客服</view>
		</view>
		<view class="p-[30rpx] mx-[30rpx] my-[24rpx] bg-[#fff] rounded-[16rpx]">
			<view class="mb-[30rpx]">
				<view class="flex justify-between items-center mb-[30rpx]">
					<view class="text-[24rpx] text-[#333] font-normal">商品金额</view>
					<priceNumber price="7.33"></priceNumber>
				</view>
				<view class="flex justify-between items-center mb-[30rpx]">
					<view class="text-[24rpx] text-[#333] font-normal">实际支付</view>
					<priceNumber price="7.33"></priceNumber>
				</view>
				<view class="flex justify-between items-center">
					<view class="text-[24rpx] text-[#333] font-normal">实际退款</view>
					<priceNumber price="7.33"></priceNumber>
				</view>
			</view>
			<up-line></up-line>
			<view class="mt-[30rpx]">
				<view class="flex justify-between mb-[30rpx]">
					<view class="text-[24rpx] text-[#333] font-normal">订单编码</view>
					<view class="flex">
						<view class="text-[24rpx] text-[#333] font-normal mr-[24rpx]">36882749710330003</view>
						<view class="text-[18rpx] text-[#333] font-normal px-[14rpx] py-[8rpx] rounded-[30rpx] bg-[#F7F8FA]">复制</view>
					</view>
				</view>
				<view class="flex justify-between mb-[30rpx]">
					<view class="text-[24rpx] text-[#333] font-normal">支付方式</view>
					<view class="flex">
						<image src="../static/wx.png" mode="scaleToFill" class="mr-[8rpx] w-[32rpx] h-[32rpx] block"/>
						<view class="text-[24rpx] text-[#333] font-normal mr-[24rpx]">微信支付</view>
					</view>
				</view>
				<view class="flex justify-between mb-[30rpx]">
					<view class="text-[24rpx] text-[#333] font-normal">下单时间</view>
					<view class="flex">
						<view class="text-[24rpx] text-[#333] font-normal mr-[24rpx]">2024-04-08 24:59:59</view>
					</view>
				</view>
				<view class="flex justify-between mb-[30rpx]">
					<view class="text-[24rpx] text-[#333] font-normal">支付时间</view>
					<view class="flex">
						<view class="text-[24rpx] text-[#333] font-normal mr-[24rpx]">2024-04-08 24:59:59</view>
					</view>
				</view>
				<view class="flex justify-between mb-[30rpx]">
					<view class="text-[24rpx] text-[#333] font-normal">收货时间</view>
					<view class="flex">
						<view class="text-[24rpx] text-[#333] font-normal mr-[24rpx]">2024-04-08 24:59:59</view>
					</view>
				</view>
				<view class="flex justify-between mb-[30rpx]">
					<view class="text-[24rpx] text-[#333] font-normal">售后申请时间</view>
					<view class="flex">
						<view class="text-[24rpx] text-[#333] font-normal mr-[24rpx]">2024-04-08 24:59:59</view>
					</view>
				</view>
				<view class="flex justify-between">
					<view class="text-[24rpx] text-[#333] font-normal">退款通过时间</view>
					<view class="flex">
						<view class="text-[24rpx] text-[#333] font-normal mr-[24rpx]">2024-04-08 24:59:59</view>
					</view>
				</view>
			</view>
		</view>
    </view>
</template>

<script setup>
import priceNumber from '@/components/priceNumber.vue'
</script>

<style lang="scss" scoped>

</style>